<!DOCTYPE html>
<html>
  <head>
    <title>testD3_chp11_1.html</title>
    
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
	</script>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <svg width="960" height="600"></svg>
    <script>
    	var svg = d3.select("svg")
    	svg.append("circle")
    		.attr("cx",200)
    		.attr("cy",300)
    		.attr("r",100)
    		.attr("fill","blue")
    		.on("click",function(){
    			var circle = d3.select(this)
    				.transition()
    				.duration(2000)
    				.attr("cx",500)
    				.attr("r",40)
    				.attr("fill","yellow");
    			console.log(d3.event);
    		})
    </script>
  </body>
</html>
